/*
见到store文件夹就意味着见到了vuex

该文件用于穿件vuex中最为核心的store
*/
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//准备actions，用于响应组件中的动作

// 由于防止以后的功能越来越多，导致vuex的三个组件愈发臃肿，其实你可以模块化开发

// 作用于计数功能的配置
const countOptions = {
    namespaced:true,
    actions:{
        jia(context,value){
            /**
             * context：可以理解成mini版本的store
             * value：传过来的值
             */
            // console.log('123',a,b);
            // 这里需要注意的是，尽量actions是小写，mutations是大写
            context.commit('JIA',value)
        },
    
        jiaWait(context,value){
            // 你也可以获得state中的值
            context.state.sum;
    
            // 有业务逻辑可以写在actions中
            setTimeout(()=>{},200)
        }
    },
    mutations:{
        JIA(state,value){
            state.sum += value
        },
        JIAWAIT(state,value){
    
        }
    },
    state:{
        sum:0
    },
    getters:{
        bigSum(state){
            // 需要注意的是，这里的state是自己的state所以
            // 不需要点出 配置项目的内容，也就是说他是局部的而不是全局的
            return state.sum * 10
        }
    }
}
// 作用于人员的配置
const personOptions = {
    namespaced:true,
    actions:{},
    mutations:{},
    state:{},
    getters:{}
}

const actions = {
    
}
//准备mutations 用于操作数据
const mutations ={
    JIA(state,value){
        state.sum += value
    },
    JIAWAIT(state,value){

    }
}
// 准备 state-用于存储数据
const state = {
    sum:0
}

// 新的配置项，getters，用于将state中的数据进行加工，
// 想必组件中的computed属性，他是全局的，哪里都可以使用
const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

// 创建 store
// 选用新的配置项目
const store = new Vuex.Store({
    modules:{
        // 新的模块配置项，这里随便起了a作为名字，如果你希望使用a所映射的配置项目
        // 在对应的模块上，也要加上指定的内容，例如你想用countOption里的state 的sum
        // 属性，你需要这样写 $stroe.state.a.sum
        // 同时，你想要调用方法，也可以这样调用
        // $store.commit('a/JIA',params)
        // 如果你使用了vuex模块 mapState 那么 mapState(['a','b'])
        // 界面上写 a.sum
        /**
         * 如果你想要写这个配置的前缀，在使用mapState你可以这样写
         * mapState('a',['sum']) 意思是映射 配置 a里面的sum，这样你就可以直接
         * 使用sum属性在组件上了。
         * 
         * 前提是你需要在定义配置的时候，开启
         * namespaced 属性
         * 
         * 需要注意的是，如果你希望调用模块中的getter方法，你需要这样调用
         * $store.getters['a/bigSum'],
         * 使用mapGetter则保持和其它写法一样就可以了。
         * 使用action也同样
         * 
         * $store.dispatch['a/jia'],
         */
        a:countOptions,
        b:personOptions

    }
})
// 暴露
export default store